<template>
  <div class="statistics-container">
    <!-- 页面标题 -->
    <el-page-header title="返回" @back="goBack" class="page-header">
      <template #content>
        <span class="page-title">用户行为统计分析</span>
      </template>
    </el-page-header>

    <!-- 图表展示区 -->
    <div class="chart-area">
      <!-- 柱状图 - 用户使用场景 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户使用场景统计</span>
            <el-date-picker
                v-model="barDateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchBarData"
            />
          </div>
        </template>
        <div ref="barChart" class="chart"></div>
      </el-card>

      <!-- 折线图 - 使用时间点 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户活跃时间段统计</span>
            <el-select
                v-model="lineDateType"
                placeholder="选择统计周期"
                @change="fetchLineData"
            >
              <el-option
                  v-for="item in dateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
        </template>
        <div ref="lineChart" class="chart"></div>
      </el-card>

      <!-- 饼图 - 使用类型 -->
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户使用类型统计</span>
            <el-date-picker
                v-model="pieDate"
                type="month"
                placeholder="选择月份"
                @change="fetchPieData"
            />
          </div>
        </template>
        <div ref="pieChart" class="chart"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'

const router = useRouter()

const barChart = ref(null)
const lineChart = ref(null)
const pieChart = ref(null)

let barInstance = null
let lineInstance = null
let pieInstance = null

const barDateRange = ref([new Date(new Date().setDate(1)), new Date()])
const lineDateType = ref('week')
const pieDate = ref(new Date())

const dateOptions = [
  { value: 'day', label: '按日' },
  { value: 'week', label: '按周' },
  { value: 'month', label: '按月' }
]

const goBack = () => {
  router.go(-1)
}

const initCharts = () => {
  barInstance = echarts.init(barChart.value)
  lineInstance = echarts.init(lineChart.value)
  pieInstance = echarts.init(pieChart.value)
  window.addEventListener('resize', handleResize)
}

const handleResize = () => {
  barInstance?.resize()
  lineInstance?.resize()
  pieInstance?.resize()
}

// 写死的数据
const mockBarData = [
  { scene: '首页浏览', count: 120 },
  { scene: '商品搜索', count: 200 },
  { scene: '购物车', count: 150 },
  { scene: '订单支付', count: 80 },
  { scene: '个人中心', count: 60 }
]

const mockLineData = [
  { time: '周一', count: 30 },
  { time: '周二', count: 50 },
  { time: '周三', count: 80 },
  { time: '周四', count: 60 },
  { time: '周五', count: 90 },
  { time: '周六', count: 120 },
  { time: '周日', count: 110 }
]

const mockPieData = [
  { type: '浏览', count: 300 },
  { type: '下单', count: 120 },
  { type: '支付', count: 100 },
  { type: '退款', count: 20 },
  { type: '客服咨询', count: 50 }
]

// 柱状图
const fetchBarData = () => {
  const option = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { data: ['使用次数'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: mockBarData.map(item => item.scene),
      axisLabel: { interval: 0, rotate: 30 }
    },
    yAxis: { type: 'value', name: '使用次数' },
    series: [{
      name: '使用次数',
      type: 'bar',
      data: mockBarData.map(item => item.count),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#0077e6' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }]
  }
  barInstance.setOption(option)
}

// 折线图
const fetchLineData = () => {
  const option = {
    tooltip: { trigger: 'axis' },
    legend: { data: ['活跃用户数'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', boundaryGap: false, data: mockLineData.map(item => item.time) },
    yAxis: { type: 'value', name: '活跃用户数' },
    series: [{
      name: '活跃用户数',
      type: 'line',
      stack: '总量',
      data: mockLineData.map(item => item.count),
      smooth: true,
      lineStyle: { width: 3, color: '#67C23A' },
      itemStyle: { color: '#67C23A' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
          { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
        ])
      }
    }]
  }
  lineInstance.setOption(option)
}

// 饼图
const fetchPieData = () => {
  const option = {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
    legend: { orient: 'vertical', left: 10, data: mockPieData.map(item => item.type) },
    series: [{
      name: '使用类型',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: { show: false, position: 'center' },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: { show: false },
      data: mockPieData.map(item => ({
        value: item.count,
        name: item.type
      })),
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 2
      }
    }],
    color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
  }
  pieInstance.setOption(option)
}

onMounted(() => {
  initCharts()
  fetchBarData()
  fetchLineData()
  fetchPieData()
})

onBeforeUnmount(() => {
  barInstance?.dispose()
  lineInstance?.dispose()
  pieInstance?.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.statistics-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 18px;
  font-weight: 500;
}

.chart-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.chart-card {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart {
  width: 100%;
  height: 400px;
}

@media (min-width: 1200px) {
  .chart-area {
    grid-template-columns: 1fr 1fr;
  }

  .chart-card:first-child {
    grid-column: span 2;
  }
}
</style>